Macro Modules | Alert Banner

HTML

<section class="alert-banner alert-banner--pink" role="alert" aria-atomic="true" aria-labelledby="coronavirus-alert-heading">
                <a href="#" class="alert-banner__link">
                        <h2 class="alert-banner__title" id="coronavirus-alert-heading">Now Providing Rapid Coronavirus (COVID-19) Testing</h2>
                        <div class="alert-banner__text">ChoiceOne is now offering rapid COVID-19 testing to patients with symptoms at most locations. Results are returned in approximately 15 minutes.</div>
                </a>
            </section> <!-- .alert-banner -->

Notes

Alert Banner for Location Detail - Pink

Templates this appears on:

Location Detail (Entity) w/ Pink & Gray Messaging

HTML

<section class="alert-banner alert-banner--taupe" role="alert" aria-atomic="true" aria-labelledby="flu-shots-alert-heading">
                <a href="#" class="alert-banner__link">
                        <h2 class="alert-banner__title" id="flu-shots-alert-heading">Flu shots are no longer in stock at this center.</h2>
                        <div class="alert-banner__text">More information an flu shot availability at this location will be made available to the public as soon as it is available.</div>
                </a>
            </section> <!-- .alert-banner -->

Notes

Alert Banner for Location Detail - Taupe

Templates this appears on:

Location Detail (Entity) w/ Gray & Taupe Messaging

HTML

<section class="alert-banner alert-banner--taupe" role="alert" aria-atomic="true" aria-labelledby="flu-shots-alert-heading">
                <div class="alert-banner__link alert-banner__link--no-href">
                        <h2 class="alert-banner__title" id="flu-shots-alert-heading">Flu shots are no longer in stock at this center.</h2>
                        <div class="alert-banner__text">More information an flu shot availability at this location will be made available to the public as soon as it is available.</div>
                </div>
            </section> <!-- .alert-banner -->

Notes

Alert Banner for Location Detail - Taupe, No Link

Templates this appears on:

Location Detail (Entity) w/ Gray & Taupe Messaging

HTML

<section class="alert-banner alert-banner--gray" role="alert" aria-atomic="true" aria-labelledby="coronavirus-alert-heading">
                <a href="#" class="alert-banner__link">
                        <h2 class="alert-banner__title" id="coronavirus-alert-heading">Now Providing Rapid Coronavirus (COVID-19) Testing</h2>
                        <div class="alert-banner__text">ChoiceOne is now offering rapid COVID-19 testing to patients with symptoms at most locations. Results are returned in approximately 15 minutes.</div>
                </a>
            </section> <!-- .alert-banner -->

Notes

Alert Banner for Location Detail - Gray

Templates this appears on: